<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <dv-full-screen-container>
    <div class="wrap">
      <div class="top">
        <img src="../../assets/images/home-header.png" alt="" />
        <p class="top_p">郑州远卓农牧</p>
        <div class="top_left">
          <dv-decoration3
            style="width: 100%; height: 100%; background: #00193f"
          />
        </div>
        <div class="top_right">
          <dv-decoration3
            :reverse="true"
            style="width: 100%; height: 100%; background: #00193f"
          />
        </div>
      </div>
      <div class="box">
        <div class="left">
          <Left></Left>
        </div>
        <div class="middle">
          <Middle></Middle>
        </div>
        <div class="right">
          <Right></Right>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script lang="ts" setup>
import Middle from "../../components/Month/Middle.vue";
import Left from "../../components/Month/Left.vue";
import Right from "../../components/Month/Right.vue";
</script>

<style scoped>
.wrap {
  width: 100vw;
  height: 100vh;
}

.top {
  width: 100vw;
  height: 10vh;
  position: relative;
}

.top img {
  width: 100%;
  height: 100%;
  background: #00183e;
}

.top .top_p {
  position: absolute;
  width: 20vw;
  height: 5vh;
  text-align: center;
  font-size: calc(100vw * 32 / 1920);
  font-weight: bold;
  left: 40vw;
  top: 1vh;
  color: aqua;
  background: none;
}

.top_left {
  width: 15vw;
  height: 4vh;
  background: cornflowerblue;
  position: absolute;
  left: 14vw;
  top: 4vh;
}

.top_left img {
  width: 100%;
  height: 100%;
}

.top_right {
  width: 15vw;
  height: 4vh;
  background: cornflowerblue;
  position: absolute;
  top: 4vh;
  right: 14vw;
}

.top_right img {
  width: 100%;
  height: 100%;
  transform: rotate(-180deg);
}

.box {
  width: 100%;
  height: 90vh;
  /* background: pink; */
}

.box .left {
  width: 25vw;
  height: 90vh;
  /* background: aquamarine; */
  float: left;
  background: linear-gradient(to bottom, #00183e, #002d5b);
}

.box .middle {
  width: 50vw;
  height: 90vh;
  /* background: yellow; */
  float: left;
  background: linear-gradient(to bottom, #00183e, #002d5b);
}

.box .right {
  width: 25vw;
  height: 90vh;
  /* background: darkgreen; */
  float: right;
  padding-right: 0.5vw;
  background: linear-gradient(to bottom, #00183e, #002d5b);
}
</style>
